<template>
  <div class="app-container">
    <el-row :gutter="8">
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 10 }" :xl="{ span: 10 }"
              style=" margin-bottom: 30px"
      >
        <h2>玩家背包物品总价值排行榜</h2>

        <el-table
          v-loading="loading"
          :data="awardList"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column label="ID" align="center" prop="userId"  width="180">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <el-button type="text" @click="goToUserPage(scope.row.userId)" style="margin-right: 10px">
                  {{ scope.row.userId }}
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户" align="center" prop="nickname" width="200">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <el-avatar :src="scope.row.headimg"></el-avatar>
                <div>{{ scope.row.nickname }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="背包物品总价值" align="center" prop="totalAmount" >
            <template slot-scope="scope">
              <span style="color: #f56c6c">{{ scope.row.totalAmount }}¥</span>
            </template>
          </el-table-column>

          <el-table-column label="特权账号" align="center" prop="ifPrivate" >
            <template slot-scope="scope">
              <span v-if="scope.row.ifPrivate === 1" style="color: #f56c6c">是</span>
              <span v-else style="color: #67c23a">否</span>
            </template>
          </el-table-column>

        </el-table>

      </el-col>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 14 }" :xl="{ span: 14 }"
              style="margin-bottom: 30px"
      >

      </el-col>
    </el-row>
  </div>
</template>

<script>



import {getUserBagTop} from "@/api/dashboard";

export default {
  name: "userLeaderboard",
  data() {
    return {
      loading: true,
      awardList: []

    }

  },
  created() {
    this.getAwardList();

  },
  methods: {
    goToUserPage(userId) {
      this.$router.push({path: '/users/user_xq/index/' + userId});
    },
    getAwardList() {
      this.loading = true;
      getUserBagTop().then(res => {
        this.loading = false;
        this.awardList = res.data;
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });

    },
  },
};
</script>
